<template>
  <div class="banner left position">
    <div class="clearfix bannerBox" ref="bannerBox">
      <a v-for="(item, index) in product" :key="index" class="left bannerLi">
        <img src="../../assets/images/ad.jpg" />
      </a>
    </div>
    <ul class="optionLeft hoverUl clearfix">
      <li v-for="(item, index) in product" :key="index" class="hoverLi left"></li>
    </ul>
  </div>
</template>

<script>
import { setInterval, clearInterval } from 'timers'
export default {
  name: 'Banner',
  data () {
    return {
      product: [
        {
          pUrl: '/static/img/ad.jpg'
        },
        {
          pUrl: '../../assets/images/ad.jpg'
        },
        {
          pUrl: '../../assets/images/ad.jpg'
        }
      ],
      indexs: 0,
      productLength: 0,
      bannerWidth: 0,
      inMoving: 0,
      outMoving: 0,
      inIndex: 0,
      outIndex: 0,
      intervals: null
    }
  },
  mounted () {
    this.bannerWidth = this.$refs.bannerBox.getBoundingClientRect().width // 获取广告区域的宽度
    this.inMoving = this.bannerWidth // 存储广告进入的最初left值
    this.productLength = this.product.length // 广告的数量
    this.outIndex = this.productLength - 1 // 初始化第一次移出广告区域的广告（最后一张广告）
    this.animate() // 开始第一次广告动画
    this.runInterval() // 开始广告定时滚动
  },
  methods: {
    runInterval () {
      /* banner轮换滚动定时器 */
      let _this = this
      this.intervals = setInterval(() => {
        _this.animate()
      }, 4000)
    },
    animate () {
      /* banner动画 */
      let _this = this
      let steps = 10 // 滚动帧数距离
      let intervals = setInterval(() => {
        _this.inMoving -= steps
        _this.outMoving -= steps
        _this.$refs.bannerBox.childNodes[_this.inIndex].style.left = `${_this.inMoving}px`
        _this.$refs.bannerBox.childNodes[_this.outIndex].style.left = `${_this.outMoving}px`
        if (_this.inMoving <= steps) {
          // 最后一帧的判断
          _this.$refs.bannerBox.childNodes[_this.inIndex].style.left = `0px` // 当前广告的位置
          _this.$refs.bannerBox.childNodes[_this.outIndex].style.left = `100%` // 移出的广告恢复定位到右侧
          if (_this.inIndex === _this.productLength - 1) {
            // 如果当前广告为最后一张的处理
            _this.inIndex = 0
            _this.outIndex = _this.productLength - 1
          } else if (_this.inIndex === 0) {
            // 如果当前广告为第二张
            _this.inIndex++
            _this.outIndex = 0
          } else {
            // 其他正常情况
            _this.inIndex++
            _this.outIndex++
          }
          _this.inMoving = _this.bannerWidth
          _this.outMoving = 0
          clearInterval(intervals)
        }
      }, 30)
    }
  }
}
</script>

<style lang='scss' scoped>
  .banner{
    width: 705px;
    height: 100%;
    background: #fff;
    overflow: hidden;
    .bannerBox{
      .bannerLi{
        position: absolute;
        left: 100%;
      }
    }
    .hoverUl{
      left: 0;
      right: 0;
      top: 0;
      right: 0;
      z-index: 999;
      .hoverLi{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
        &:hover, &.active{
          color: #fff;
        }
      }
    }
  }
</style>
